<template>
  <div>
    <a-modal width="90%" title="新增绑定" :visible="visible" :confirm-loading="confirmLoading" @ok="binding" @cancel="handleCancel">
      <a-spin class="anchor-review" tip="加载中..." :spinning="isLoading">
        <!-- 筛选 -->
        <div class="filter">
          <div class="l search-box">
            <div>
              <span>高德id：</span>
              <a-input-search style="width:120px;" type="text" placeholder="高德id" allowClear v-model="search.gdId" @search="handleByQueryCond" />
            </div>
            <div>
              <span>地址：</span>
              <a-input-search style="width:200px;" type="text" placeholder="地址" allowClear v-model="search.address" @search="handleByQueryCond" />
            </div>
            <div>
              <span>POI名称：</span>
              <a-input-search style="width:150px;" type="text" placeholder="名称" allowClear v-model="search.name" @search="handleByQueryCond" />
            </div>
            <div>
              <span>POI匹配状态：</span>
              <a-select style="width:160px;" placeholder="请选择状态" v-model="search.matchStatus" @change="handleByQueryCond">
                <a-select-option v-for="item in poiStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </div>
            <div>
              <span>POI同步状态：</span>
              <a-select style="width:160px;" placeholder="请选择状态" v-model="search.isSync" @change="handleByQueryCond">
                <a-select-option v-for="item in poiSyncStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </div>
            <div>
              <span>POI通过状态：</span>
              <a-select style="width:160px;" placeholder="请选择状态" v-model="search.materialStatus" @change="handleByQueryCond">
                <a-select-option v-for="item in materialStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
              </a-select>
            </div>
            <div>
              <span>资质审核时间：</span>
              <a-range-picker @change="handleByQueryCond" v-model="search.selectDate" />
            </div>
          </div>

          <div class="r">
            <a-button type="primary" @click="handleByQueryCond" style="background:#1d6fe9">查询</a-button>
          </div>
        </div>
        <!-- 已选择 -->
        <div style="width:100%;margin:10px 0 0">
          <a-row>
            <a-col :span="8" v-for="(item, index) in selectLine" :key="item.id">
              <a-checkbox :value="item.id" :checked="item.isChecked" @change="changeCheck(item, index)"> {{ item.poiName || '门店名称' }} -- {{ item.gdId || '无' }} </a-checkbox>
            </a-col>
          </a-row>
        </div>
        <!-- 表格 -->
        <div class="main-body">
          <a-table :columns="tableColumns" :pagination="false" :data-source="poiList" :scroll="{ x: 900, y: tableHeight }" rowKey="id" :row-selection="rowSelection">
            <!-- 高德POI信息 -->
            <template slot="poiName" slot-scope="text, record">
              <p><span class="font-weight-bold">门店名称：</span>{{ record.poiName || '' }}</p>
              <p><span class="font-weight-bold">所属城市：</span>{{ record.city || '' }}</p>
              <p><span class="font-weight-bold">门店地址：</span>{{ record.address || '' }}</p>
              <p><span class="font-weight-bold">经度：</span>{{ record.longitude || '' }}</p>
              <p><span class="font-weight-bold">纬度：</span>{{ record.latitude || '' }}</p>
              <p v-if="record.gdId">
                <span class="font-weight-bold">高德POI_ID：</span><a :href="record.gdUrl || ''" target="_blank" v-if="record.gdUrl">{{ record.gdId || '' }}</a
                ><span v-else>{{ record.gdId || '' }}</span>
              </p>
            </template>
            <!-- 抖音POI信息 -->
            <template slot="bytePoiName" slot-scope="text, record">
              <p><span class="font-weight-bold">门店名称：</span>{{ record.bytePoiName || '' }}</p>
              <p><span class="font-weight-bold">门店类型：</span>{{ record.bytePoiTypeName || '' }}</p>
              <p><span class="font-weight-bold">所属城市：</span>{{ record.byteCity || '' }}</p>
              <p><span class="font-weight-bold">门店地址：</span>{{ record.byteAddress || '' }}</p>
              <p><span class="font-weight-bold">经度：</span>{{ record.byteLongitude || '' }}</p>
              <p><span class="font-weight-bold">纬度：</span>{{ record.byteLatitude || '' }}</p>
              <p v-if="record.poiId">
                <span class="font-weight-bold">抖音POI_ID：</span><a :href="record.bytePoiUrl || ''" target="_blank" v-if="record.bytePoiUrl">{{ record.poiId || '' }}</a
                ><span v-else>{{ record.poiId || '' }}</span>
              </p>
            </template>
            <!-- POI融合信息 -->
            <template slot="createTime" slot-scope="text, record">
              <p><span class="font-weight-bold">POI匹配申请时间：</span>{{ record.createTime || '' }}</p>
              <p><span class="font-weight-bold">POI匹配状态：</span>{{ record.matchStatusStr || '' }}</p>
              <p><span class="font-weight-bold">POI同步状态：</span>{{ record.isSyncStr || '' }}</p>
              <p><span class="font-weight-bold">备注：</span>{{ record.matchStatusDesc || '' }}</p>
            </template>
            <!-- 商家资质审核信息 -->
            <template slot="materialStatus" slot-scope="text, record">
              <div>
                <span class="font-weight-bold">商家资质审核状态：</span>
                <p v-for="(item, index) in materialStatus" :key="index">
                  <span v-if="record.materialStatus === item.value">{{ item.name }}</span>
                </p>
              </div>
              <p><span class="font-weight-bold">商家资质提审时间：</span>{{ record.materialApplyTime || '' }}</p>
              <p><span class="font-weight-bold">过期时间：</span>{{ record.expirTime || '' }}</p>
              <div>
                <span class="font-weight-bold">资质审核拒绝描述：</span>
                <p v-for="(item, index) in record.materialList" :key="index">{{ index + 1 }} 、 {{ item }}</p>
              </div>
            </template>
            <!-- 商家资质 -->
            <template slot="urls" slot-scope="text, record">
              <div style="display:flex" v-for="(item, index) in record.qualification" :key="index" class="zzimg">
                <p v-for="(v, i) in urlName" :key="i" v-show="index === v.value" style="width:80px;text-align:right;">{{ v.name }} :&nbsp;</p>
                <div v-if="item && item.length > 0">
                  <upload v-show="item && item.length > 0" :limit="item.length" disabled :value="item"> </upload>
                </div>
                <div v-else style="margin:0 0 3px 0;">无</div>
              </div>
            </template>
          </a-table>
        </div>
        <!-- 分页 -->
        <div class="paging-container">
          <a-pagination
            :pageSize="pagination.pageSize"
            v-model="pagination.pageIndex"
            :total="pagination.total"
            showQuickJumper
            showLessItems
            :showTotal="(total) => `共 ${total} 条`"
            style="margin: 10px auto;"
            @change="handlePageChange"
          />
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { poiListUrl, spuBindAddUrl } from '@/service'
import upload from '@/components/upload/upload'
import moment from 'moment'
import { columnsConfig } from '../../columns'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ModalText: 'Content of the modal',
      // visible: false,
      confirmLoading: false,
      moment,
      // loading是否显示
      isLoading: false,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 6
      },
      // table数据查询条件
      search: {
        gdId: '',
        matchStatus: '',
        isSync: '',
        address: '',
        name: '',
        materialStatus: '',
        selectDate: []
      },
      urlName: [
        { name: '营业执照', value: 'bizLicencePath' },
        { name: '行业许可证', value: 'qualMaterial' },
        { name: '商家授权函', value: 'contractPath' },
        { name: '商家证明', value: 'provePath' },
        { name: '其他资质', value: 'additionalQual' }
      ],
      // 订单列表
      poiList: [],
      // 主播列表总数据条数
      anchorTotal: 0,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      selectDateNew: {},
      selectLine: [],
      // 是否翻页
      isPageChange: false
    }
  },
  components: {
    upload
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (value, record) => this.onSelectChange(value, record),
        getCheckboxProps: (record) => ({
          // 可对POI同步状态为已同步的poi进行选择(可复选)
          props: {
            disabled: record.isSync !== 2, // Column configuration not to be checked
            name: record.name
          }
        })
      }
    },
    // 状态
    poiStatus() {
      return [
        {
          name: '全部',
          value: ''
        },
        {
          name: '等待匹配',
          value: 0
        },
        {
          name: '匹配中',
          value: 1
        },
        {
          name: '匹配成功',
          value: 2
        },
        {
          name: '匹配失败',
          value: 3
        }
      ]
    },
    poiSyncStatus() {
      return [
        {
          name: '全部',
          value: ''
        },
        {
          name: '待同步',
          value: 0
        },
        {
          name: '同步中',
          value: 1
        },
        {
          name: '已同步',
          value: 2
        },
        {
          name: '同步失败',
          value: 3
        }
      ]
    },
    materialStatus() {
      return [
        {
          name: '全部',
          value: ''
        },
        {
          name: '审核中',
          value: 0
        },
        {
          name: '审核通过',
          value: 1
        },
        {
          name: '审核拒绝',
          value: 2
        },
        {
          name: '未提交',
          value: 3
        },
        {
          name: '无资质',
          value: 4
        },
        {
          name: '协议已过期',
          value: 5
        }
      ]
    },
    tableColumns() {
      let getColumns = columnsConfig.poiColumns || []
      return getColumns.slice(0, -1)
    }
  },
  methods: {
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      this.$emit('close')
    },
    // ----------------
    onSelectChange(selectedRowKeys, row) {
      this.selectedRowKeys = selectedRowKeys
      let selectRow = []
      let conformRows = []
      conformRows = this.selectLine.concat(row)
      for (var i = 0; i < conformRows.length; i++) {
        if (selectRow.indexOf(conformRows[i]) === -1 && selectedRowKeys.includes(conformRows[i].id)) {
          selectRow.push(conformRows[i])
        }
      }
      this.selectLine = selectRow
      this.selectLine.forEach((item, index) => {
        item['isChecked'] = true
      })
    },
    changeCheck(item = {}, index) {
      const { gdId = '' } = item
      this.selectLine.splice(index, 1)
      this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(gdId), 1)
    },
    binding() {
      if (!this.selectedRowKeys.length) {
        this.$messageSend.warning('请勾选后再进行操作')
        return
      }
      this.loading = true
      const { selectedRowKeys, query, productId } = this
      const postParams = {
        shopIds: selectedRowKeys,
        productId
      }
      console.log(this.selectedRowKeys)
      spuBindAddUrl(postParams)
        .then((res) => {
          query()
          this.selectedRowKeys = []
          this.selectLine = []
          this.$messageSend.success('绑定成功')
          this.$emit('updateList')
        })
        .finally(() => {
          this.loading = false
          this.selectedRowKeys = []
          this.selectLine = []
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 通过条件查询
     * @returns {void}
     */
    handleByQueryCond() {
      this.pagination.pageIndex = 1
      this.query()
    },

    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.isPageChange = true
      this.query()
    },

    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { matchStatus, isSync, address, name, gdId, materialStatus, selectDate } = this.search

      return {
        pageIndex,
        pageSize,
        gdId,
        matchStatus,
        isSync,
        address,
        name,
        materialStatus,
        startTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
        endTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, gdId, matchStatus, isSync, address, name, materialStatus, startTime, endTime } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          gdId: gdId || '',
          matchStatus: matchStatus || '',
          isSync: isSync || '',
          address: address || '',
          name: name || '',
          materialStatus: +materialStatus || '',
          selectDate: startTime && endTime ? [startTime, endTime] : []
        }
      }
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取主播信息列表
     * 具体参数参考 getAnchorInfoListApi 方法
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      poiListUrl(this.getParams())
        .then((rs) => {
          this.poiList = Object.freeze(rs.poiList) || []
          this.pagination.total = rs.total || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    }
  },
  mounted() {
    const { id = '' } = this.$route.query
    this.productId = id
    this.setSearch()
    this.query()
  }
}
</script>

<style lang="less" scoped>
.anchor-review {
  padding: 16px;
}

// 主播信息弹窗
.anchor-info {
  /deep/ .ant-modal-footer {
    border-top: none;
    padding-bottom: 36px;
    text-align: center;
  }

  //  描述列表样式覆盖
  /deep/ .ant-descriptions-view {
    .ant-descriptions-item-label {
      color: #666666;
    }

    .ant-descriptions-item-content {
      color: #333;
      vertical-align: text-top;
    }
  }
}
.color-f55 {
  color: #f55f4e !important;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  > div {
    margin-right: 15px;
    margin-bottom: 5px;
  }
}
.zzimg {
  /deep/.ant-upload-list-item-list-type-picture-card,
  /deep/.ant-upload-list-picture-card-container {
    width: 30px;
    height: 30px;
    margin: -6px 3px 6px 0;
    padding: 3px;
    border-radius: 2px;
  }
}
p {
  margin-bottom: 5px;
  font-size: 13px;
}
.font-weight-bold {
  font-weight: bold;
  display: inline-block;
}

table tbody td div {
  margin-top: 2px;
}
/deep/ table tbody td a {
  margin-right: 0;
}
</style>
